<template>
	<view class="timeline" >
		<view class="timeline-item" v-for="(item, index) in timelineItems" :key="index">
			<view class="timeline-line"></view>
			<view class="timeline-dot"></view>
			<view class="timeline-dot2"></view>
			<view class="timeline-content">
				<text class="timeline-date">{{ item.createTime }}</text>
				<text class="timeline-title">已完成{{ item.schedule }}%</text>
			</view>
			<view v-if="item.remark" class="timeline-contentremark">
				{{ item.remark }}
			</view>
		</view>
		<u-empty v-if="!timelineItems.length" mode="car" text="暂无进度记录" icon="/static/empty-img.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		props:['timelineItems'],
		data() {
			return {
				// timelineItems: [{
				// 		jindu: '10%',
				// 		date: '2023-04-01',
				// 		description: '开始一个新项目，规划功能和设计。'
				// 	},
				// 	{
				// 		jindu: '20%',
				// 		date: '2023-04-05',
				// 		description: ''
				// 	},
				// 	{
				// 		jindu: '30%',
				// 		date: '2023-04-10',
				// 		description: '进入开发阶段，前端和后端并行工作。'
				// 	},
				// 	{
				// 		jindu: '60%',
				// 		date: '2023-04-20',
				// 		description: ''
				// 	},
				// 	{
				// 		jindu: '100%',
				// 		date: '2023-04-30',
				// 		description: '项目测试通过，正式上线发布。'
				// 	}
				// ]
			};
		}
	};
</script>

<style>
	.timeline {
		position: relative;
		padding: 10px;
		list-style: none;
	}

	.timeline-item {
		position: relative;
		padding-left: 20px;
		padding-bottom: 20px;
	}

	.timeline-dot {
		position: absolute;
		top: 5px;
		left: 0;
		width: 12px;
		height: 12px;
		background-color: #216CFF;
		border-radius: 50%;
		display: block;
	}

	.timeline-dot2 {
		position: absolute;
		top: -1px;
		left: -6px;
		width: 24px;
		height: 24px;
		background: rgba(33, 108, 255, 0.1);
		border-radius: 50%;
		display: block;
	}

	.timeline-line {
		position: absolute;
		top: 5px;
		left: 3px;
		width: 2px;
		border-right: 1px dashed #B6BDC9;
		height: 100%;

		border-radius: 50%;

	}

	.timeline-item:last-child .timeline-line {
		border-right: 0px dashed #B6BDC9;
	}

	.timeline-content {
		position: relative;
	}

	.timeline-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #216CFF;
		line-height: 22px;
		text-align: left;
		font-style: normal;
	}

	.timeline-contentremark {

		padding: 9px 10px;
		background: #F7F9FB;
		border-radius: 8px;
		border: 1px solid #E4E6E7;

		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #111111;
		line-height: 22px;
		text-align: justify;
		font-style: normal;
	}

	.timeline-date {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #216CFF;
		line-height: 22px;
		text-align: left;
		font-style: normal;
	}
</style>